<template>
  <div>
    <!-- 分页组件 -->
    <el-pagination
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      :page-sizes="[2,5,8,10,20]"
      :page-size="pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
    ></el-pagination>
    <!-- table表格 -->
    <el-table :data="postList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column label="缩略图" width="120">
        <template slot-scope="scoped">
          <img
            v-if="scoped.row.cover[0]"
            :src="fixImgUrl(scoped.row.cover[0].url)"
            alt
            class="photo"
          />
          <img v-else src="@/assets/logo.png" alt />
        </template>
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scoped">{{scoped.row.create_date.split('T')[0]}}</template>
      </el-table-column>
      <el-table-column prop="user.nickname" label="作者" width="120"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scoped">
          <el-button
            type="primary"
            size="small"
            @click="$router.push('/editpost?id='+scoped.row.id)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      :page-sizes="[2,5,8,10,20]"
      :page-size="pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postList: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10
    };
  },
  mounted() {
    this.loadPost();
  },
  methods: {
    fixImgUrl(url) {
      if (url.indexOf("http") >= 0) {
        return url;
      } else {
        return this.$axios.defaults.baseURL + url;
      }
    },
    currentChange(newIndex) {
      this.pageIndex = newIndex;
      this.loadPost();
    },
    sizeChange(newSize) {
      // console.log(newSize);
      this.pageSize = newSize;
      this.loadPost();
    },
    async loadPost() {
      const res = await this.$axios({
        url: "/post",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      });
      const { data, total } = res.data;
      this.postList = data;
      this.total = total;
    }
    // loadPost() {
    //   this.$axios({
    //     url: "/post",
    //     params: {
    //       pageIndex: this.pageIndex,
    //       pageSize: this.pageSize
    //     }
    //   }).then(res => {
    //     const { data, total } = res.data;
    //     this.postList = data;
    //     this.total = total;
    //   });
    // }
  }
};
</script>

<style lang="less" scoped>
.photo {
  width: 100%;
  height: 100%;
}
.el-pagination {
  padding: 10px 0;
}
</style>